import {
  ContextMenu,
  ContextMenuContent as _ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";
import { useSelectionState, useEditorFlagsState } from "../provider";
import { toast } from "sonner";
import { cn } from "@/components/lib/utils";
import {
  useContextMenuActions,
  ContextMenuAction,
} from "../use-context-menu-actions";

export function EditorSurfaceContextMenu({
  children,
  className,
}: React.PropsWithChildren<{ className?: string }>) {
  return (
    <ContextMenu>
      <ContextMenuTrigger className={cn("w-full h-full", className)}>
        {children}
      </ContextMenuTrigger>
      {/* TODO: disable events via portal, so the canvas won't be pannable while context menu is open */}
      <ContextMenuContent />
    </ContextMenu>
  );
}

function ContextMenuContent() {
  const { selection } = useSelectionState();
  const { debug } = useEditorFlagsState();
  const actions = useContextMenuActions(selection);

  const ActionItem = ({ action }: { action: ContextMenuAction }) => (
    <ContextMenuItem
      onSelect={action.onSelect}
      disabled={action.disabled}
      className="text-xs"
    >
      {action.label}
      {action.shortcut && (
        <ContextMenuShortcut>{action.shortcut}</ContextMenuShortcut>
      )}
    </ContextMenuItem>
  );

  return (
    <_ContextMenuContent className="w-52">
      <ActionItem action={actions.copy} />
      <ActionItem action={actions.paste} />
      <ContextMenuSub>
        <ContextMenuSubTrigger className="text-xs">
          Copy/Paste as...
        </ContextMenuSubTrigger>
        <ContextMenuSubContent>
          <ActionItem action={actions.copyAsSVG} />
          <ActionItem action={actions.copyAsPNG} />
        </ContextMenuSubContent>
      </ContextMenuSub>
      <ContextMenuSeparator />
      <ActionItem action={actions.bringToFront} />
      <ActionItem action={actions.sendToBack} />
      <ContextMenuSeparator />
      <ActionItem action={actions.flatten} />
      {actions.removeMask.disabled ? (
        <ActionItem action={actions.groupMask} />
      ) : (
        <ActionItem action={actions.removeMask} />
      )}
      <ContextMenuSub>
        <ContextMenuSubTrigger className="text-xs">
          Edit Vector...
        </ContextMenuSubTrigger>
        <ContextMenuSubContent>
          <ActionItem action={actions.planarize} />
        </ContextMenuSubContent>
      </ContextMenuSub>
      <ContextMenuSeparator />
      <ActionItem action={actions.group} />
      <ActionItem action={actions.ungroup} />
      <ActionItem action={actions.groupWithContainer} />
      <ActionItem action={actions.autoLayout} />
      <ContextMenuSeparator />
      <ActionItem action={actions.zoomToFit} />
      <ContextMenuSeparator />
      <ActionItem action={actions.toggleActive} />
      <ActionItem action={actions.toggleLocked} />
      <ContextMenuSeparator />
      <ActionItem action={actions.delete} />

      {debug && (
        <>
          <ContextMenuSeparator />
          <ContextMenuItem
            className="py-1"
            onSelect={() => {
              // copy id
              navigator.clipboard.writeText(selection.join(", ")).then(() => {
                toast.success("Copied ID to clipboard");
              });
            }}
          >
            <span className="font-mono text-[9px] text-muted-foreground truncate">
              ID: {selection.join(", ")}
            </span>
          </ContextMenuItem>
        </>
      )}
    </_ContextMenuContent>
  );
}
